<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu
          @select="selectMenu"
          class="el-menu-vertical-demo"
          :default-active="currentIndexLight"
          :router="startRouter"
          active-text-color="#ffd04b"
        >
          <!--
          :default-openeds="arrIndex"
          -->
          <div v-for="item in menuList" :key="item.path">
            <!-- 没有子菜单 -->
            <template v-if="item.children && item.children.length == 0">
              <el-menu-item :index="item.path">
                <i class="el-icon-menu"></i>
                {{ item.title }}
              </el-menu-item>
            </template>

            <!-- 有子菜单 -->
            <el-submenu v-else :index="item.path">
              <template slot="title">
                <i class="el-icon-menu"></i>
                {{ item.title }}
              </template>

              <template v-for="child in item.children">

                <el-menu-item :key="child.path" :index="child.path">
                  <i class="el-icon-location"></i>
                  {{ child.title }}
                </el-menu-item>
              </template>
            </el-submenu>
          </div>
        </el-menu>
      </el-aside>


      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{ name }}</span>
        </el-header>
        <el-main>
          <router-view v-if="isRouterAlive"/>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>
<script>

import axios from "axios";

export default {
  name: 'Menu',
  /*props: ['name'],*/
  data() {
    return {
      currentIndexLight: window.location.pathname,//设置菜单高亮的index为当前url路径
      name: localStorage.getItem("USERNAME"),
      isRouterAlive: true,
      startRouter: true,//开启路由标识， ，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
      menuList: [],
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },

  created() {
    let that = this;
    this.axios.post('http://localhost:8080/getMenu').then(function (res) {
      console.log(res.data)
      that.menuList = res.data
    })
  },

  methods: {
    selectMenu(key, keyPath) {
      /*console.log(key, keyPath)*/
      this.currentIndexLight = key;
    },
    /**
     * 局部更新，在其他地方用inject: ['reload'] 引入,需要时this.reload即可
     */
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => this.isRouterAlive = true)//局部更新
    }
  }
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
